<template>
  <div class="bo">
    <Content v-bind="foodList">
      <!-- 
        在template上，通过v-slot指令接收来自组件内部的作用域插槽传的值组成的对象，我们可以直接通过解构接收对应的值
       -->
      <template v-slot:typeList="{ list }">
        <ol>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ol>
      </template>
    </Content>
    <Content v-bind="gameList">
      <template #typeList="{ list }">
        <ul>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ul>
      </template>
    </Content>
  </div>
</template>
<script>
import Content from './components/Content.vue';
export default {
  name: 'App',
  components: {
    Content,
  },
  data() {
    return {
      foodList: {
        type: '美食',
        list: ['青椒肉丝', '鱼香肉丝', '蹄花海带'],
      },
      gameList: {
        type: '游戏',
        list: ['LOL', '永劫无间', '绝地求生'],
      },
    };
  },
};
</script>
<style>
.bo {
  border-radius: 50px;
  display: flex;
  justify-content: center;
}
</style>
